<!DOCTYPE html>
<html>
<head th:include="include::header">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
    <title>编辑新闻</title>
</head>
<style>
    .float-right {
        float: right!important;
    }
    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: 315px;
    }
    .form-control {
        width: 500px;
        height: 28px;
        border: #a8a8a8 1px solid;
        border-radius: 5px;
    }
    .ss{
        position: relative;
        top: 5px;
    }
    .btn-success{
        width: 75px;
        height: 35px;
    }
</style>
<body>
<div id="newsEdit">
    <div style="padding: 20px">
        <br/>
        <div class="row">
            <div class="col-sm-3">
                <input type="hidden" id="newsId" th:value="${id}">
                <label class="float-right ss">标题：</label>
            </div>
            <div class="col-sm-7">
                <input id="title" class="form-control">
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-3" >
                <label class="float-right ss">类型：</label>
            </div>
            <div class="col-sm-7">
                <select id="newsType" class="form-control">
                    <option value="1">大赛公告</option>
                    <option value="2">大赛资讯</option>
                    <option value="3">大赛风采</option>
                </select>
            </div>
        </div>
        <br>
        <div class="row sd">
            <div class="col-sm-3 ">
                <label class="float-right">上传封面：</label>
            </div>
            <div class="col-sm-7">
                <input type="file"   class="form-control-file" id="uploadfile">
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-3 ">
                <label class="float-right">内容</label>
            </div>
            <div class="col-sm-7">
                <label>(请在下列文本框中添加内容)</label>
            </div>
        </div>
    </div>
    <br/>
    <div id='edit' style="margin-top: 30px;width:1250px;margin: 0 auto"></div>
    <br>
    <div style="width:100px;height: 50px;margin: 0 auto"><button class="btn-success" id="saveNews" @click="getvals">保存</button></div>
</div>
<div th:include="include::footer"></div>
<script>
    (function () {
        new FroalaEditor("#edit",{
            language: 'zh_cn',
            toolbarStickyOffset: 0,
            toolbarButtons:[
                'undo', 'redo','codeView','fontSize','bold', 'italic', 'underline', 'strikeThrough',  'backgroundColor',
                'align', 'formatOL', 'formatUL', 'indent', 'outdent','quote','lineHeight','spellChecker','textColor',
                'clearFormatting','inlineStyle','inlineClass','superscript','subscript','fontAwesome','fontFamily',
                'paragraphFormat','insertImage', 'insertLink', 'insertVideo', 'paragraphStyle','insertTable', 'emoticons',
                'fontAwesome', 'specialCharacters', 'embedly', 'insertHR','fullscreen','print' ,'html',
            ],
            fontFamilySelection: true,
            fontSizeSelection: true,
            paragraphFormatSelection: true,
            imageUploadURL:"/uploadNewsImg",
            events: {
                initialized: function () {
                    const editor = this
                    let newsCover = ""

                    let newsId = document.getElementById("newsId").value
                    axios.get("/getAllNews").then(res=>{
                        let htmlInner = res.data.filter(f=>f.news_id==newsId)[0];
                        this.html.set(htmlInner.content);//展示新闻内容
                        document.getElementById("title").value = htmlInner.title
                        document.getElementById("newsType").value = htmlInner.news_type;
                        newsCover = htmlInner.cover_url;
                    })

                    document.getElementById("saveNews").onclick = function () {
                        console.log(editor.html.get(true))
                    }
                    document.getElementById("uploadfile").onchange = function (val) {
                        let file = val.target.files;
                        let formdata = new FormData();
                        formdata.append("file",file[0]);
                        if (newsCover!=""){
                            axios.post("/batchUploadImg",{"url":newsCover}).then(res=>{

                            })
                        }
                        axios({
                            method:"post",
                            headers:{'Content-Type':'multipart/form-data'},
                            url:"/uploadCover",
                            data:formdata
                        }).then(res=>{
                            newsCover = res.data.link;
                        })
                    }
                    document.getElementById("saveNews").onclick = function () {
                        let data={
                            "news_id":document.getElementById("newsId").value,
                            "title":document.getElementById("title").value,
                            "news_type":document.getElementById("newsType").value,
                            "content":editor.html.get(true),
                            "cover_url":newsCover
                        }
                        axios.post("/saveUpdateNews",Qs.stringify(data)).then(res=>{
                            if (res.data){
                                alert("更新成功")
                                window.location.href = "/newmanager.html";
                            }
                        })
                    }
                },
                'image.removed': function (img,link) {
                    axios.post("/batchUploadImg?url="+img[0].currentSrc).then(res=>{

                    })
                }
            }
        })
    })()
</script>
</body>
</html>